
       
        /* 
            封装Ajax的调用过程：
                1.在调用的时候需要传递的参数
                    1.请求方式  2.请求地址  3.请求头信息  4.传递的数据(k=v,k=v)
                
                2.通过一个对象来接受请求参数
                options {
                    type: "POST",
                    url:"http://www.biwuit.cn/spboot/hello",
                    data:{
                        username:"zs"
                        password:"123"
                    }
                    header:{
                        'Content-Type' : 'application/x-www-form-urlencoded'
                    },
                    success: function(){},
                    error: function(){}

                }
                    success: 调用成功后会执行的方法
                    error: 调用失败后会执行的方法
         */
        function ajax(options) {
            const request = new XMLHttpRequest();
            //1.定义默认值
            const defaults = {
                type: 'GET',
                url: '',
                async: true,
                data: {},
                header: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function () {},
                error: function () {}
            }

            /* 
                const target = { a: 1, b: 2 };
                const source = { b: 4, c: 5 };

                const returnedTarget = Object.assign(target, source);
              */
            //2.通过用户传递的数据替换默认值
            Object.assign(defaults,options);

            //3.如果是GET请求，需要将参数进行拼接，
             let params = '';
             for(const key in defaults.data){
                 params +=key+'='+defaults.data[key]+"&"
             }
             //去掉最后一个连接符&
             params = params.substring(0,params.length-1);
             //4.判断是否为GET请求,GET请求需要拼接参数
             if(defaults.type == "GET"){
                 defaults.url+="?"+params;
             }

             //5.创建链接
             request.open(defaults.type,defaults.url,defaults.async);
             
             //6.判断是否为POST请求
             if(defaults.type =="POST"){
                 //设置头部信息
                 request.setRequestHeader('Content-Type',defaults.header['Content-Type'])
                 //判断发送到服务端的数据格式是否为JSON
                 if(defaults.header['Content-Type'] == "application/json"){//application/json 提示要json格式的数据
                    request.send(JSON.stringify(defaults.data)) ;
                 }else{
                     request.send(params)
                 }
             }else{
                 request.send();
             }

             //7.请求完成后的处理
             //当一个XMLHttpRequest请求完成的时候会触发load 事件。
             request.onload = function(){
                 //获取服务端相应的头部信息
                 const responseContentType = request.getResponseHeader("Content-Type");//获取服务端响应回来的头部信息
                 let responseValue = request.responseText;
                 //判断服务端响应回来的数据格式是否为JSON格式
                 if(responseContentType.includes("application/json")){
                     responseValue = JSON.parse(responseValue);
                 }

                 //响应成功，调用回调函数，将服务端想用结果和xmlHTTPRequest对象返回
                 if(request.status ==200){
                     defaults.success(responseValue,request)
                 }else{
                     defaults.error(responseValue,request)
                 }
             }
             //8.请求发送的时候出现错误
             request.onerror = function(){
                 console.log("请求出错了")
                 defaults.error(request)
             }

        }




        

        function jsonp(options) {
            //创建一个script标签
            const scriptObj = document.createElement("script")
            let params = ''

            for (const key in options.data) {
                params += '&'+ key + '=' + options.data[key] 
            }
            //生成函数的名称
            //调用服务端url
            scriptObj.src = options.url + "?callback=" + options.funcname + params;

            //将options.funcname变成全局的
            window[options.funcname] = options.success;
            // console.dir(window)
            
            //执行加删除
            document.body.appendChild(scriptObj)
            scriptObj.parentNode.removeChild(scriptObj)


            /* 
                func10({name: "比屋教育05"})    Uncaught ReferenceError: func10 is not defined
                解决思路：  func10 一定要在全局存在，可以执行的
            */

        }
